<template>
  <el-row id="exam-add-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>
    <el-row id="examAddForm-box">
      <el-form id="examAddForm" ref="addExamFrom" :model="examAddForm" :rules="rules" label-width="80px">
        <el-form-item>
          <el-row id="examAddForm-button-box">
          <el-col :span="6" :offset="18">
            <el-button
              id="auditButton"
              class="buttonStyle1"
              type="primary"
              @click="addExam()"
              round
              >创建</el-button
            >
            <el-button
              id="auditButton"
              class="buttonStyle1"
              @click="cancel()"
              round
              >取消</el-button
            >
          </el-col>
        </el-row>
        </el-form-item>
        <el-form-item label="试卷名称" prop="examName">
          <el-input v-model="examAddForm.examName" placeholder="请输入试卷名称"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="examDate">
          <el-date-picker
            v-model="examAddForm.examDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="考试时长" prop="totalTime">
              <el-col :span="10">
                <el-input v-model="examAddForm.totalTime" type="number" min="0" max="9999" placeholder="请输入考试时长"></el-input>
              </el-col>
              <span class="textType1">分钟</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="试卷总分" prop="totalScore">
              <el-col :span="10">
                <el-input v-model="examAddForm.totalScore" type="number" min="0" max="9999" placeholder="请输入试卷总分"></el-input>
              </el-col>
              <span class="textType1">分</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="试卷说明">
          <el-input type="textarea" :rows="5" v-model="examAddForm.examNote"  placeholder="可输入试卷说明"></el-input>
        </el-form-item>
        
      </el-form>
    </el-row>
    <el-row id="addProblem-box">
      <el-row class="addProblem-item">
        <el-row class="addProblem-header-item" :class="fixed == true && boxshows.boxshow1 ? 'fixed' : ''">
          <el-col :span="5">
            <label>选择题</label>
          </el-col>
          <el-col :span="4">
            <label>题目数量：{{examChoiceProblemData.length}}</label>
          </el-col>
          <el-col :span="4" :offset="11">
            <span class="linkButton" @click="boxshows.boxshow1 = !boxshows.boxshow1">
              <!-- <span v-if="!boxshows.boxshow1" @click="GetExamChoiceList($route.params.exam.examId)">展开</span> -->
              <span v-if="!boxshows.boxshow1">展开</span>
              <span v-if="boxshows.boxshow1">收起</span>
            </span>
            <keep-alive>
              <span class="linkButton" @click="goRoute({name:'examAddProblem',params:{problemType:'选择题'}})">选题</span>
            </keep-alive>
          </el-col>
        </el-row>
        <el-row class="eaxm-problem-item">
          <el-table
            class="eaxm-problem-table"
            :data="examChoiceProblemData"
            style="width: 100%"
            
            v-show="boxshows.boxshow1"
          >
          <!-- v-on:choiceProblemData="addChoiceProblemData()" -->
            <el-table-column label="序号" type="index" width="130"> </el-table-column>
            <el-table-column prop="problem" label="题目" width="710">
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="180">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteOneExamChoice(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
      <el-row class="addProblem-item">
        <el-row class="addProblem-header-item">
          <el-col :span="5">
            <label>判断题</label>
          </el-col>
          <el-col :span="4">
            <label>题目数量：{{examTrueOrFalseProblemData.length}}</label>
          </el-col>
          <el-col :span="4" :offset="11">
            <span class="linkButton" @click="boxshows.boxshow2 = !boxshows.boxshow2">
              <span v-if="!boxshows.boxshow2">展开</span>
              <span v-if="boxshows.boxshow2">收起</span>
            </span>
            <span class="linkButton" @click="goRoute({name:'examAddProblem',params:{problemType:'判断题'}})">选题</span>
          </el-col>
        </el-row>
        <el-row class="eaxm-problem-item">
          <el-table
            class="eaxm-problem-table"
            :data="examTrueOrFalseProblemData"
            style="width: 100%"
            v-show="boxshows.boxshow2"
          >
            <el-table-column label="序号" type="index" width="130"> </el-table-column>
            <el-table-column prop="problem" label="题目" width="710">
            </el-table-column>
            <el-table-column prop="difficulty" label="标签" width="180">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteOneProblemButton(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
      <el-row class="addProblem-item">
        <el-row class="addProblem-header-item">
          <el-col :span="5">
            <label>简答题</label>
          </el-col>
          <el-col :span="4">
            <label>题目数量：{{examEssayProblemData.length}}</label>
          </el-col>
          <el-col :span="4" :offset="11">
            <span class="linkButton" @click="boxshows.boxshow3 = !boxshows.boxshow3">
              <span v-if="!boxshows.boxshow3">展开</span>
              <span v-if="boxshows.boxshow3">收起</span>
            </span>
            <span class="linkButton" @click="goRoute({name:'examAddProblem',params:{problemType:'简答题'}})">选题</span>
          </el-col>
        </el-row>
        <el-row class="eaxm-problem-item">
          <el-table
            class="eaxm-problem-table"
            :data="examEssayProblemData"
            style="width: 100%"
            v-show="boxshows.boxshow3"
          >
            <el-table-column label="序号" type="index" width="130"> </el-table-column>
            <el-table-column prop="problem" label="题目" width="710">
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="180">
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteOneProblemButton(scope.row)"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-row>
    </el-row>
  </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb';
import { mapState,mapMutations } from 'vuex'
export default {
  name: "ExamAdd",
  components: {
    Breadcrumb,
  },
  data(){
    return{
      breadcrumb:[
        {name:"试卷管理",path:"exam"},
        {name:"新增试卷",path:""},
      ],
      boxshows:{
        boxshow1:false,
        boxshow2:false,
        boxshow3:false,
      },
      TagData:[
      ],
      fixed:{
        fixed1: false
      },
      rules: {
          examName: [
            { required: true, message: '请输入试卷名称', trigger: 'blur' }
          ],
          examDate: [
            { type: 'date', required: true, message: '请选择日期和时间', trigger: 'change' }
          ],
          totalTime: [
            { required: true, message: '请输入考试时长', trigger: 'blur' }
          ],
          totalScore: [
            { required: true, message: '请输入总分', trigger: 'blur' }
          ],
        }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.fixedActiveBtn)
  },
  methods: {
    ...mapMutations('exam', [
        'setExamAddEmpty',
        'deleteExamChoiceItem'
    ]),
    toUuidList(examChoiceProblemData,examTrueOrFalseProblemData,examEssayProblemData){
      var tempList =[]
      for(let i =0;i<examChoiceProblemData.length;i++){
          tempList.push(examChoiceProblemData[i].uuId)
      }
      for(let i =0;i<examTrueOrFalseProblemData.length;i++){
          tempList.push(examTrueOrFalseProblemData[i].uuId)
      }
      for(let i =0;i<examEssayProblemData.length;i++){
          tempList.push(examEssayProblemData[i].uuId)
      }
      this.examAddForm.uuIdList = [...tempList]
      console.log(this.examAddForm.uuIdList)
    },
    addExam(){
      if(!this.checkForm())
        return;
      this.toUuidList(this.examChoiceProblemData,this.examTrueOrFalseProblemData,this.examEssayProblemData)
      this.axios.post("/exam/add",{
        examName: this.examAddForm.examName,courseName:this.course.courseName,
        examDate:this.examAddForm.examDate,totalTime:this.examAddForm.totalTime,
        totalScore:this.examAddForm.totalScore,examNote:this.examAddForm.examNote,
        uuIdList: this.examAddForm.uuIdList})
        .then(response => {
            if(response.status == 200){
                this.hintMessage("添加试卷成功")
                this.$router.replace('/Exam');//跳转到路径
            }else{
                alert("status:"+response.status)
            }
        })
        .catch(error => alert(error));
    },
    goRoute(location){
      console.log(this)
      this.$router.push(location)
    },
    fixedActiveBtn () {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      scrollTop >= 387 ? (this.fixed = true) : (this.fixed = false)
    },
    hintMessage(value){
      this.$message({
        showClose: true,
        message: value,
        type: 'success'
      });
    },
    deleteOneExamChoice(row){
      console.log(row)
      this.deleteExamChoiceItem(row.choiceId)
    },
    checkForm(){
        if(!this.examAddForm.examName || !this.examAddForm.examDate || !this.examAddForm.totalTime || !this.examAddForm.totalScore){
            this.$message({
              showClose: true,
              message: "请填写试卷信息！",
              type: 'warning'
            });
            return false;
        }
        return true;
    },
    cancel(){
      this.$router.push({name:'exam'})
    }
  },
  computed:{
    ...mapState('exam', {
        examAddForm:'examAddForm',
        examChoiceProblemData: 'choiceProblemData',
        examTrueOrFalseProblemData: 'trueOrFalseProblemData',
        examEssayProblemData: 'essayProblemData',
    }),
    ...mapState('course', {
        course:'course',
    }),
  },
  beforeRouteLeave (to,from,next) {
    if(!(Object.is(to.name,'examAddProblem') || Object.is(to.name,'examAdd')))
      this.setExamAddEmpty();
    // console.log(to.path);//到哪去
    next()
 }
};
</script>
<style scoped>
/* 自定义的样式 */
#exam-add-box{
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;

  background-color: #f6fafb !important;
  height: 100%;
}

#breadcrumb{
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdfe6 !important;
  margin-bottom: 30px;
}
#exam-add-box .el-form {
  background-color: #fafafa;
}
#exam-add-box .buttonStyle1 {
  width: 100px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-left: 15px;
}
#examAddForm{
  /* height: 303px; */
  padding-top: 30px;
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 20px;
}

/* 试卷添加题目 */
label{
  margin: 0px;
}

#addProblem-box{
  padding-top: 20px;
}
.addProblem-header-item{
  padding-top: 30px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  background-color: #ffffff;
  /* border: 1px solid #dcdfe6 !important; */
}
.addProblem-header-item .linkButton{
  padding-right: 30px;
  cursor:pointer;
  /* color: rgb(15, 79, 30); */
  font-weight: 700;
}
.addProblem-item{
  margin-bottom: 20px;
}

.fixed {
  margin-top: 64px;
  position: fixed;
  z-index: 21;
  height: 70px;
  /* width: 100%; */
  top: 0;
  left: 200px;
  right: 0;

  /* padding-top: 30px; */
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 20px;
  background-color: #fafafa;
  /* margin-left: 40px;
  margin-right: 40px; */
}
.textType1{
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
}
</style>
<style>
/* 修改element-ui的样式 */
#examAddFrom .el-form-item{
  padding: 0px;
}
#examAddForm .el-form-item .el-form-item__label{
  display:block!important;
  height: 40px!important;
  line-height: 40px!important;
}
#examAddForm{
  background-color: #fff!important;
}
</style>